<template>
  <div class="chat-feedback-container">
    <div class="feedback-left">
      <img
        :class="`reanswer-icon ${reAnswer ? '' : 'disabled'}`"
        :src="reAnswer ? reanswerIcon : reanswerDisabled"
        @click="bindRefresh"
      />
      <span class="reanswer-text">重新回答</span>
    </div>
    <div class="feedback-right">
      <img
        class="operation-icon"
        src="../../assets/image/copy.png"
        @click="copy"
      />

      <div class="feedback-switch-answer" v-if="switchAnswer">
        <img
          class="switch-icon"
          src="../../assets/image/chat-feedback-left.png"
          @click="bindLastAnswer"
        />
        <span class="switch-status">{{
          `${currentNum}/${totalAnswerNum}`
        }}</span>
        <img
          class="switch-icon"
          src="../../assets/image/chat-feedback-right.png"
          @click="bindNextAnswer"
        />
      </div>
      <!-- <img class="operation-icon" :src="imgBaseUrl + 'chat-copy.png'" /> -->
      <img
        class="operation-icon satisfied"
        :src="satisfied ? feedbackSatSelect : feedbackSat"
        @click="handelSatisfied"
      />
      <el-popover
        title="反馈"
        placement="top-end"
        trigger="click"
        ref="popover"
        v-model="showDisPopover"
        @show="onShowPop"
      >
        <div class="feeback-pop-body">
          <div class="prob-container">
            <div
              :class="`prob-single ${
                feedbackProbList.includes(item.id) ? 'selected' : ''
              }`"
              v-for="(item, index) in probList"
              :key="index"
              @click="selectProb(item.id)"
            >
              {{ item.feedback }}
            </div>
          </div>
          <el-input
            class="feedback-input"
            v-model="feedbackText"
            placeholder="其他"
            size="small"
          ></el-input>
        </div>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="showDisPopover = false"
            >取消</el-button
          >
          <el-button type="primary" size="mini" @click="submitFeedback"
            >提交</el-button
          >
        </div>
        <img
          slot="reference"
          class="operation-icon diss"
          :src="dissatisfied ? feedbackDisSelect : feedbackDis"
          @click="handelDissatisfied"
        />
      </el-popover>
      <!-- <img
        slot="reference"
        class="operation-icon"
        :src="dissatisfied ? feedbackDisSelect : feedbackDis"
        @click="handelDissatisfied"
      /> -->
    </div>
  </div>
</template>

<script>
  import request from '../../utils/request'
  export default {
    name: 'ChatFeedback',
    props: {
      groupProcessId: String,
      processId: [String, Number],
      reAnswer: Boolean,
      switchAnswer: Boolean,
      totalAnswerNum: [String, Number],
      currentNum: [String, Number],
      currentLiketype: [String, Number],
      probList: Array,
    },
    components: {},
    data() {
      return {
        imgBaseUrl: 'http://chunfengai.top:29001/download/',
        likeType: 0,
        satisfied: false,
        dissatisfied: false,
        showDisPopover: false,
        feedbackText: '',
        // probList: [],
        feedbackProbList: [],
        feedbackSat: require('../../assets/image/chat-satisfied.png'),
        feedbackSatSelect: require('../../assets/image/chat-satisfied-selected.png'),
        feedbackDis: require('../../assets/image/chat-diss.png'),
        feedbackDisSelect: require('../../assets/image/chat-diss-selected.png'),
        reanswerIcon: require('../../assets/image/chat-refresh.png'),
        reanswerDisabled: require('../../assets/image/chat-refresh-disabled.png'),
      }
    },
    computed: {},
    watch: {
      currentLiketype(n, o) {
        console.log('likeTypeChange feedback', n)
        this.satisfied = n == 1
        this.dissatisfied = n == 2
      },
    },
    created() {
      this.satisfied = this.currentLiketype == 1
      this.dissatisfied = this.currentLiketype == 2
      // this.requireProbList()
    },
    mounted() {},
    methods: {
      setData(obj) {
        Object.keys(obj).forEach((key) => {
          this[key] = obj[key]
        })
      },

      handelSatisfied() {
        const sat = this.satisfied
        if (sat) {
          this.setData({ satisfied: !sat })
        } else {
          this.setData({ satisfied: !sat, dissatisfied: sat })
        }
        this.triggerStatusChange()
      },
      handelDissatisfied() {
        const dissat = this.dissatisfied
        if (dissat) {
          this.setData({ dissatisfied: !dissat })
          this.showDisPopover = true
        } else {
          this.setData({ dissatisfied: !dissat, satisfied: dissat })
          this.showDisPopover = false
        }
        this.triggerStatusChange()
      },
      selectProb(id) {
        if (this.feedbackProbList.includes(id)) {
          let index = this.feedbackProbList.indexOf(id)
          this.feedbackProbList.splice(index, 1)
        } else {
          this.feedbackProbList.push(id)
        }
      },
      onShowPop() {
        if (this.showDisPopover) {
          console.log('showpop :>> ')
          return
        } else {
          let vm = this.$refs['popover'][0]
          console.log('showpop :>> ', vm)
        }
      },
      submitFeedback() {
        this.showDisPopover = false
        this.triggerStatusChange()
      },
      triggerStatusChange() {
        const params = {
          processId: this.processId,
          groupProcessId: this.groupProcessId,
          likeType: this.satisfied ? 1 : this.dissatisfied ? 2 : 0,
          unlikeReasonId: this.feedbackProbList,
          unlikeReason: this.feedbackText,
        }
        this.$emit('feedbackStatusChange', params)
      },
      bindLastAnswer() {
        if (!this.currentNum == 0) {
          let param = {
            type: -1,
            processId: this.processId,
          }
          this.$emit('switchAnswerContent', param)
        }
      },
      bindNextAnswer() {
        let param = {
          type: 1,
          processId: this.processId,
        }
        this.$emit('switchAnswerContent', param)
      },
      bindRefresh() {
        if (!this.reAnswer) return
        this.$emit('reanswer', this.processId)
      },
      copy() {
        this.$emit('copy')
      },
      // requireProbList() {
      //   let params = {
      //     method: 'POST',
      //     url: '/applet/dialog/feedback/list',
      //   }
      //   request(params)
      //     .then((res) => {
      //       this.probList = res.data.data
      //     })
      //     .catch((res) => {
      //       console.log('err in feedback :>> ', res)
      //     })
      // },
    },
  }
</script>
<style scoped lang="less">
  .chat-feedback-container {
    display: flex;
    justify-content: space-between;
    margin-left: 12px;
    .feedback-left {
      display: flex;
      align-items: center;
      .reanswer-icon {
        cursor: pointer;
        height: 30px;
        width: 30px;
      }
      .disabled {
        cursor: default;
      }
      .reanswer-text {
        margin-left: 8px;
        font-size: 14px;
        color: #999999;
        line-height: 16px;
      }
    }
    .feedback-right {
      display: flex;
      align-items: center;
      .feedback-switch-answer {
        margin-left: 8px;
        width: 86px;
        height: 30px;
        background: rgba(101, 176, 180, 0.1);
        border-radius: 8px 8px 8px 8px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .switch-icon {
          cursor: pointer;
          height: 16px;
          width: 16px;
        }
        .switch-status {
          cursor: pointer;
          font-size: 14px;
          color: #999999;
          line-height: 22px;
        }
      }
      .operation-icon {
        margin-left: 8px;
        height: 30px;
        width: 30px;
        cursor: pointer;
        &.satisfied {
          // margin-bottom: 3px;
        }
        &.diss {
          margin-top: 4px;
        }
      }
    }
  }
  .feeback-pop-body {
    display: flex;
    flex-direction: column;
    .prob-container {
      display: flex;
      flex-wrap: wrap;
    }
    .prob-single {
      // height: 32px;
      background: #ffffff;
      border-radius: 10px 10px 10px 10px;
      border: 1px solid rgba(199, 199, 199, 0.6);
      margin-right: 8px;
      margin-bottom: 8px;
      padding: 6px 10px;
      cursor: pointer;
      transition: all 0.2s;
      &.selected {
        border: 1px solid #65b0b4;
        background: rgba(101, 176, 180, 0.15);
      }
    }
    .feedback-input {
      margin-bottom: 10px;
    }
  }
</style>
